<template>
  <!-- 购物车最下方结算 -->
  <view class="my-settle-container">
    <view>
      <radio
        color="#c00000"
        :checked="getAllSelectState"
        @click="toggle"
      />全选
    </view>
    <view>合计:
      <text class="amount">{{ getSelectAmount }}</text>
    </view>
    <view
      class="btn-settle"
      :style="{ background: getSelectTotal === 0 ? '#bdbdbd' : '#c00000' }"
      @click="settle"
    >结算({{ getSelectTotal }})</view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex"
export default {
  data() {
    return {
      time: 3, // 倒计时时长
      isCountDown: false // 是否在倒计时
    }
  },
  methods: {
    ...mapMutations("car", ["updateAllGoodsState"]),
    ...mapMutations("user", ["setRedirectUrl"]),
    // 获得所有的选中状态（全选按钮修改）
    toggle() {
      this.updateAllGoodsState(!this.getAllSelectState)
      // console.log("getAllSelectState:", this.getAllSelectState);
    },
    // 结算
    settle() {
      // 判断是否勾选了商品 (结算的数字getSelectTotal可判断)
      if (this.getSelectTotal === 0) {
        uni.showToast({
          title: "请至少选中一样商品",
          icon: "none"
        })
        return
      }
      // 判断是否有收获地址
      if (!this.getAddress) {
        uni.showToast({
          title: "请选中收货地址",
          icon: "none"
        })
        return
      }
      // 判断是否登录
      if (!this.getToken) {
        // if(this.isCountDown)return
        uni.showToast({
          title: `请先登录 ${this.time}秒后跳转到登录页面`,
          icon: "none",
          duration: 1000
        })
        this.timer = setInterval(() => {
          if (this.time <= 1) {
            clearInterval(this.timer)
            this.time = 3
            this.isCountDown = false

            // 跳转到登录页面
            uni.switchTab({
              url: "/pages/my/index",
              success: () => {
                // 这样的目的是，将来登录之后跳回来（记录原先的地址）
                this.setRedirectUrl("/pages/cart/index") // 设置没登录重定向到登录页
              }
            })
            return
          }
          this.time--
          uni.showToast({
            title: `请先登录 ${this.time}秒后跳转到登录页面`,
            icon: "none",
            duration: 1000
          })

          return //假如没token打回
        }, 1000)
      }
      this.orderAndPay() // 下单
    },
    // 下单和支付方法
    async orderAndPay() {
      // 1.下单
      // 1.1 准备支付参数
      const params = {
        // 总金额
        order_price: this.getSelectAmount,
        // 收货地址
        consignee_addr: `${this.getAddressStr}${this.getAddress.userName}${this.getAddressStr}`,
        // 商品
        // 先过滤，再对原有数组进行处理
        goods: this.getCarList.filter(item => item.goods_state)
          .map(({ goods_id, goods_number, goods_price }) => ({
            goods_id, goods_number, goods_price
          }))
      }
      // console.log('params:', params);
      // 发请求结算
      const res = await uni.$request({
        url: 'my/orders/create',
        method: "POST",
        data: params
      })
      if (res.meta.status === 200) {
        const { order_number } = res.message
        // 2.支付
        // 没企业号弹不出支付模态框 wx.requestPayment(Object object)
      } else {
        uni.showToast({
          title: '创建订单失败',
          icon: 'error',
          mask: true
        })
        return
      }
    }
  },
  computed: {
    ...mapGetters("car", [
      "getTotal",
      "getAllSelectState",
      "getSelectTotal",
      "getSelectAmount",
      "getCarList"
    ]),
    ...mapGetters("user", ["getAddress", "getToken", 'getAddressStr'])
    // 除getAllSelectState外第二种获取get全选状态方法
    // isAllSelect() {
    //   return this.getTotal === this.getSelectTotal
    // },
  }
}
</script>


<style lang="scss" scoped>
.my-settle-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}
</style>
